<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>

<template>
<canvas id="myCanvas" width="360" height="650"></canvas>
</template>

<script>
import facecat from './facecat.js';
let gPaint = new facecat.FCPaint();
let gMenu = new facecat.FCMenu();

/*
* 点击方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
* clicks:点击次数
*/
gPaint.onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
    facecat.onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
	if (view.viewType == "menuitem") {
		console.log(view.text + "=" + view.value);
	}
};

/*
* 鼠标按下实现方法
* view:视图
* mp:坐标
* button:按钮
* clicks:点击次数
* delta:滚轮值
*/
gPaint.onMouseDown = function (view, mp, buttons, clicks, delta) {
	facecat.onMouseDownDefault(view, mp, buttons, clicks, delta);
	if (buttons == 2) {
		gMenu.location = view.paint.touchDownPoint;
		gMenu.visible = true;
		facecat.adjustMenu(gMenu);
		facecat.invalidate(gMenu.paint);
	}
};

/*
* 触摸开始方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
gPaint.onTouchBegin = function (view, firstTouch,  firstPoint, secondTouch, secondPoint) {
	facecat.onTouchBeginDefault(view, firstTouch,  firstPoint, secondTouch, secondPoint);
	if(!gMenu.visible){
		gMenu.location = view.paint.touchDownPoint;
		gMenu.visible = true;
		facecat.adjustMenu(gMenu);
		facecat.invalidate(gMenu.paint);
	}
};

/*
 * 重置大小
 */
let resizeAll = function () {
	try {
		const canvas = document.getElementById('myCanvas');
		canvas.width = document.documentElement.clientWidth;
		canvas.height = document.documentElement.clientHeight;
		facecat.scaleCanvas(gPaint);
		facecat.updateViewDefault(gPaint.views);
	} catch (err) {
	}
	facecat.invalidate(gPaint);
};
	
export default { 
	data() {
		return {
		}
	},
	onLoad() {
	}, 
	mounted(){
			const canvas = document.getElementById('myCanvas');
			gPaint.isMobile = facecat.isMobileMode();
			window.addEventListener('resize', resizeAll, true);
			let context = canvas.getContext("2d"); //绘图上下文
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			gPaint.canvas = canvas;
			facecat.scaleCanvas(gPaint);
			//注册事件
			facecat.addDefaultEvent(canvas, gPaint);
			//解析加载XML
			let xml = `<?xml version="1.0" encoding="utf-8"?>
			<html xmlns="facecat">
			  <head>
			  </head>
			  <body>
				<div dock="fill">
				</div>
			  </body>
			</html>
			`;
			facecat.renderFaceCat(gPaint, xml);
			gMenu.size = new facecat.FCSize(100, 300);
			facecat.addView(gMenu, gPaint);
			for (let i = 0; i < 10; i++) {
				let menuItem = new facecat.FCMenuItem();
				menuItem.text = "菜单项" + (i + 1);
				menuItem.value = i + 1;
				facecat.addMenuItem(menuItem, gMenu);
				for (let j = 0; j < 10; j++) {
					let subMenuItem = new facecat.FCMenuItem();
					subMenuItem.text = "子菜单项" + (j + 1);
					subMenuItem.value = j + 1;
					facecat.addMenuItemToParent(subMenuItem, menuItem);
					for (let z = 0; z < 10; z++) {
						let sunMenuItem = new facecat.FCMenuItem();
						sunMenuItem.text = "孙菜单项" + (z + 1);
						sunMenuItem.value = z + 1;
						facecat.addMenuItemToParent(sunMenuItem, subMenuItem);
					}
				}
			}
		},
		methods: {  
	}
}
</script>
